<!-- <!DOCTYPE html> - this test runs in quirks mode. -->
<style>
body {
  /* Ensure the document is scrollable. */
  min-height: 100%;
  padding-bottom: 100px;
}
</style>

<script src='../../../resources/testharness.js'></script>
<script src='../../../resources/testharnessreport.js'></script>
<script src='../../../external/wpt/web-animations/testcommon.js'></script>
<script src='../../../external/wpt/scroll-animations/testcommon.js'></script>

<body></body>

<script>
promise_test(async t => {
  const scroller = document.scrollingElement;
  const scrollerHeight = scroller.scrollHeight - scroller.clientHeight;
  const scrollTimeline = new ScrollTimeline(
      { scrollSource: scroller, orientation: 'block' });

  // Dirty style.
  document.body.style.background = 'red';

  // The following should not crash, as currentTime should clean the style before
  // resolving the scrollingElement.
  assert_percents_equal(scrollTimeline.currentTime, 0);

  // Now do some scrolling and make sure that the ScrollTimelines update.
  scroller.scrollTop = 0.2 * scrollerHeight;

  // Wait for new animation frame  which allows the timeline to compute new
  // current time.
  await waitForNextFrame();

  // Again, dirty style.
  document.body.style.background = '';

  // Once again, no crash expected.
  assert_percents_equal(scrollTimeline.currentTime, 20);
}, 'currentTime should clean style (and not crash) in quirks mode');
</script>
